<script setup>

  import { listAssetItem } from "@/api/asset/assetItem";

  const { proxy } = getCurrentInstance();
  const { asset_state } = proxy.useDict("asset_state");

  const title = ref("选择资产清单");
  const openFlag = ref(false);
  const table = ref();
  const tableData = reactive({
    loading: false,
    list: [],
    paging: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  });
  const queryParams = reactive({
    number: null,
    name: null,
    state: 0
  });

  function open(state) {
    openFlag.value = true;
    getList(state);
  }

  function close() {
    openFlag.value = false;
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    tableData.paging.pageNum = 1;
    getList();
  }

  function resetQuery() {

  }

  /** 查询资产清单表列表 */
  async function getList(state) {
    tableData.loading = true;
    const {pageNum, pageSize} = tableData.paging;
    const query = {...queryParams};
    query.state = state;
    const pageReq = {page: pageNum - 1, size: pageSize};
    listAssetItem(query, pageReq).then(response => {
      const { content, totalElements } = response
      tableData.list = content;
      tableData.paging.total = totalElements;
      tableData.loading = false;

    }).catch(error => {
      tableData.loading = false;
      console.log(error);
    });
  }

  const emit = defineEmits(['sub'])

  function sub() {
    const selections = table.value.getSelectionRows();
    emit('sub', selections);
    close();
  }

  defineExpose({
    open
  })


</script>

<template>
  <div>
    <el-dialog ref="dialog" v-model="openFlag" :title="title" width="50%" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px" class="ry_form">
        <el-form-item label="资产编码" prop="number">
          <el-input
              v-model.trim="queryParams.number"
              placeholder="请输入资产编码"
              clearable
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="资产名称" prop="name">
          <el-input
              v-model.trim="queryParams.name"
              placeholder="请输入资产名称"
              clearable
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item class="flex_one tr">
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="table" v-loading="tableData.loading" :data="tableData.list">

        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="状态" align="center" prop="state">
          <template #default="scope">
            <dict-tag :options="asset_state" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="资产编码" width="100" align="center" prop="number"/>
        <el-table-column label="资产名称" width="140" align="center" prop="name"/>
        <el-table-column label="资产分类" align="center" prop="categoryName"/>
        <el-table-column width="250" label="RFID" align="center" prop="rfid"/>
        <el-table-column label="品牌" align="center" prop="brand"/>
        <el-table-column label="型号" align="center" prop="model"/>
        <el-table-column label="购置方式" align="center" prop="buyWay"/>
        <el-table-column label="购置时间" align="center" prop="buyTime">
          <template #default="scope">
            <span>{{ scope.row.buyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购置金额" align="center" prop="buyPrice"/>
        <el-table-column width="130" label="管理员" align="center" prop="adminName"/>
      </el-table>

      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          :page.sync="tableData.paging.pageNum"
          :limit.sync="tableData.paging.pageSize"
          @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<style scoped lang="scss">

</style>